
import Slider, { MarkerProps, SliderProps } from "@react-native-community/slider"
import { View, Button, Text, ScrollView, StyleSheet } from 'react-native';
import { Tester, TestCase, TestSuite } from '@rnoh/testerino';
import { useState, useCallback } from "react";
import React from "react";

export default function SliderExample() {
    const [maximumChangeValue, setMaximumChangeValue] = useState<Number>(0)
    const [minimunTestValue, setMinimunTestValue] = useState<Number>(0)
    const [sourceValue, setSourceValue] = useState<Number>(0)
    const [targetValue, setTargetValue] = useState<Number>(0)

    const [value, setValue] = useState(50);
    return (
        <ScrollView>
            <Tester style={{ paddingBottom: 80 }}>
                <TestSuite name="Slider">
                    <TestCase
                        itShould="vertical: Changes the orientation of the slider to vertical, if set to true."
                        initialState={false}
                        tags={['C_API']}
                        arrange={({ setState, state }) => {
                            return (
                                <View >
                                    <Text>{"current vertical value： "}{JSON.stringify(state)}</Text>
                                    <Slider
                                        style={{ width: 200, height: 40 }}
                                        minimumValue={0}
                                        vertical={state}
                                        maximumValue={100}
                                        minimumTrackTintColor={"#FFFFFF"}
                                        maximumTrackTintColor={"#000000"}
                                    />
                                    <Button onPress={() => {
                                        setState(true)
                                    }} title="change vertical Value" />
                                </View>
                            )
                        }}
                        assert={async ({ expect, state }) => {
                            expect(state).to.be.eq(true);
                        }}
                    />
                    <TestCase
                        itShould="style: Used to style and layout the Slider"
                        initialState={200}
                        tags={['C_API']}
                        arrange={({ setState, state }) => {
                            return (
                                <View style={{ height: 100 }}>
                                    <Text>{"current width status ： "}{JSON.stringify(state)}</Text>
                                    <Slider
                                        style={{ width: state, height: 40 }}
                                        minimumValue={0}
                                        maximumValue={100}
                                        minimumTrackTintColor="#FFFFFF"
                                        maximumTrackTintColor="#000000"
                                    />
                                    <Button onPress={() => {
                                        setState(300)
                                    }}
                                        title="change to style" />
                                </View>
                            )
                        }}
                        assert={async ({ expect, state }) => {
                            expect(state).to.be.eq(300);
                        }}

                    />
                    <TestCase
                        itShould="disabled: If true the user won't be able to move the slider"
                        initialState={false}
                        tags={['C_API']}
                        arrange={({ setState, state }) => {
                            return (
                                <View style={{ height: 100 }}>
                                    <Text>{"current disabeld status ： "}{JSON.stringify(state)}</Text>

                                    <Slider
                                        style={{ width: 200, height: 40 }}
                                        minimumValue={0}
                                        disabled={state}
                                        maximumValue={100}
                                        minimumTrackTintColor="#FFFFFF"
                                        maximumTrackTintColor="#000000"
                                    />
                                    <Button onPress={() => {
                                        setState(true)
                                    }}
                                        title="change to disabled state" />
                                </View>
                            )
                        }}
                        assert={async ({ expect, state }) => {
                            expect(state).to.be.true;
                        }}
                    />
                    <TestCase
                        itShould="maximumValue: Initial maximum value of the slider."
                        initialState={50}
                        tags={['C_API']}
                        arrange={({ setState, state }) => {
                            return (
                                <View >
                                    <Text>{"current maximumValue  ： "}{JSON.stringify(state)}</Text>
                                    <Text>{"current value  ： "}{JSON.stringify(maximumChangeValue)}</Text>
                                    <Slider
                                        style={{ width: 200, height: 40 }}
                                        minimumValue={0}
                                        maximumValue={state}
                                        onValueChange={(e) => {
                                            setMaximumChangeValue(e)
                                        }}
                                        minimumTrackTintColor="#FFFFFF"
                                        maximumTrackTintColor="#000000"
                                    />
                                    <Button onPress={() => {
                                        setState(100)
                                    }} title="change to maximumValue" />
                                </View>
                            )
                        }}
                        assert={async ({ expect, state }) => {
                            expect(state).to.be.eq(100);
                        }}
                    />

                    <TestCase
                        itShould="minimumValue: Initial minimum value of the slider"
                        initialState={50}
                        tags={['C_API']}
                        arrange={({ setState, state }) => {
                            return (
                                <View >
                                    <Text>{"current minimumValue  ： "}{JSON.stringify(state)}</Text>
                                    <Text>{"current value  ： "}{JSON.stringify(minimunTestValue)}</Text>
                                    <Slider
                                        style={{ width: 200, height: 40 }}
                                        minimumValue={state}
                                        value={50}
                                        maximumValue={100}
                                        onValueChange={(e) => {
                                            setMinimunTestValue(e)
                                        }}
                                        minimumTrackTintColor="#FFFFFF"
                                        maximumTrackTintColor="#000000"
                                    />
                                    <Button onPress={() => {
                                        setState(0)
                                    }} title="change to minimumValue" />

                                </View>
                            )
                        }}
                        assert={async ({ expect, state }) => {
                            expect(state).to.be.eq(0);
                        }}
                    />
                    <TestCase
                        itShould="minimumTrackTintColor: The color used for the track to the left of the button."
                        initialState={"#FFFFFF"}
                        tags={['C_API']}
                        arrange={({ setState, state }) => {
                            return (
                                <View >
                                    <Slider
                                        style={{ width: 200, height: 40 }}
                                        minimumValue={0}
                                        maximumValue={100}
                                        minimumTrackTintColor={state}
                                        maximumTrackTintColor="#000000"
                                    />
                                    <Button onPress={() => {
                                        setState('red')
                                    }} title="change to color" />
                                </View>
                            )
                        }}
                        assert={async ({ expect, state }) => {
                            expect(state).to.be.eq('red');
                        }}
                    />
                    <TestCase
                        itShould="maximumTrackTintColor: The color used for the track to the right of the button."
                        initialState={"#000000"}
                        tags={['C_API']}
                        arrange={({ setState, state }) => {
                            return (
                                <View >
                                    <Slider
                                        style={{ width: 200, height: 40 }}
                                        minimumValue={0}
                                        maximumValue={100}
                                        minimumTrackTintColor={"#FFFFFF"}
                                        maximumTrackTintColor={state}
                                    />
                                    <Button onPress={() => {
                                        setState('red')
                                    }} title="change to color" />

                                </View>
                            )
                        }}
                        assert={async ({ expect, state }) => {
                            expect(state).to.be.eq('red');
                        }}
                    />
                    <TestCase
                        itShould="lowerLimit: Slide lower limit. The user won't be able to slide below this limit."
                        initialState={20}
                        tags={['C_API']}
                        arrange={({ setState, state }) => {
                            return (
                                <View >
                                    <Text>{"init lowerLimit  ： "}{JSON.stringify(20)}</Text>
                                    <Text>{"current minimumValue  ： "}{JSON.stringify(0)}</Text>
                                    {state === 20 ? <Slider
                                        style={{ width: 200, height: 40 }}
                                        minimumValue={0}
                                        maximumValue={100}
                                        lowerLimit={20}
                                        minimumTrackTintColor={"#FFFFFF"}
                                        maximumTrackTintColor={"#000000"}
                                    /> : <></>}
                                    {state === 50 ? <Slider
                                        style={{ width: 200, height: 40 }}
                                        minimumValue={0}
                                        maximumValue={100}
                                        lowerLimit={50}
                                        minimumTrackTintColor={"#FFFFFF"}
                                        maximumTrackTintColor={"#000000"}
                                    /> : <></>}
                                    <Button onPress={() => {
                                        setState(50)
                                    }} title="change to lower limit:50" />
                                </View>
                            )
                        }}
                        assert={async ({ expect, state }) => {
                            expect(state).to.be.eq(50);
                        }}
                    />
                    <TestCase
                        itShould="upperLimit: Slide upper limit. The user won't be able to slide above this limit."
                        initialState={100}
                        tags={['C_API']}
                        arrange={({ setState, state }) => {
                            return (
                                <View >
                                    <Text>{"init upperLimit  ： "}{JSON.stringify(100)}</Text>
                                    <Text>{"current maximumValue  ： "}{JSON.stringify(100)}</Text>
                                    {state === 100 ? <Slider
                                        style={{ width: 200, height: 40 }}
                                        minimumValue={0}
                                        maximumValue={100}
                                        upperLimit={100}
                                        minimumTrackTintColor={"#FFFFFF"}
                                        maximumTrackTintColor={"#000000"}
                                    /> : <></>}
                                    {state === 80 ? <Slider
                                        style={{ width: 200, height: 40 }}
                                        minimumValue={0}
                                        maximumValue={100}
                                        upperLimit={80}
                                        minimumTrackTintColor={"#FFFFFF"}
                                        maximumTrackTintColor={"#000000"}
                                    /> : <></>}
                                    <Button onPress={() => {
                                        setState(80)
                                    }} title="change to uppper limit:80" />
                                </View>
                            )
                        }}
                        assert={async ({ expect, state }) => {
                            expect(state).to.be.eq(80);
                        }}
                    />
                    <TestCase
                        itShould="onSlidingStart: Callback that is called when the user picks up the slider."
                        initialState={"未滑动"}
                        tags={['C_API']}
                        arrange={({ setState, state }) => {
                            return (
                                <View >
                                    <Text>{"current status  ： "}{JSON.stringify(state)}</Text>
                                    <Text>{"callback handler value： "}{JSON.stringify(sourceValue)}</Text>
                                    <Slider
                                        style={{ width: 200, height: 40 }}
                                        minimumValue={0}
                                        maximumValue={100}
                                        onSlidingStart={(v) => {
                                            setSourceValue(v)
                                            setState("当前滑动开始并以当前值作为入参值")
                                        }}
                                        minimumTrackTintColor={"#FFFFFF"}
                                        maximumTrackTintColor={"#000000"}
                                    />
                                </View>
                            )
                        }}
                        assert={async ({ expect, state }) => {
                            expect(state).to.be.eq("当前滑动开始并以当前值作为入参值");
                        }}
                    />
                    <TestCase
                        itShould="onSlidingComplete: Callback that is called when the user releases the slider, regardless if the value has changed."
                        initialState={"未滑动"}
                        tags={['C_API']}
                        arrange={({ setState, state }) => {
                            return (
                                <View >
                                    <Text>{"current status  ： "}{JSON.stringify(state)}</Text>
                                    <Text>{"callback handler value： "}{JSON.stringify(targetValue)}</Text>
                                    <Slider
                                        style={{ width: 200, height: 40 }}
                                        minimumValue={0}
                                        maximumValue={100}
                                        onSlidingComplete={(v) => {
                                            setTargetValue(v)
                                            setState("释放滑块时以结束值为参的回调")
                                        }}
                                        minimumTrackTintColor={"#FFFFFF"}
                                        maximumTrackTintColor={"#000000"}
                                    />
                                </View>
                            )
                        }}
                        assert={async ({ expect, state }) => {
                            expect(state).to.be.eq("释放滑块时以结束值为参的回调");
                        }}
                    />
                    <TestCase
                        itShould="onValueChange: Callback continuously called while the user is dragging the slider."
                        initialState={0}
                        tags={['C_API']}
                        arrange={({ setState, state }) => {
                            return (
                                <View >
                                    <Text>{"current value  ： "}{JSON.stringify(Number(state.toFixed(3)))}</Text>
                                    <Slider
                                        style={{ width: 200, height: 40 }}
                                        minimumValue={0}
                                        maximumValue={100}
                                        onValueChange={(v) => {
                                            console.log(v)
                                            setState(v)
                                        }}
                                        minimumTrackTintColor={"#FFFFFF"}
                                        maximumTrackTintColor={"#000000"}
                                    />
                                </View>
                            )
                        }}
                        assert={async ({ expect, state }) => {
                            expect(state).to.be.eq(100);
                        }}
                    />
                    <TestCase
                        itShould="Step: Step value of the slider. The value should be between 0 and (maximumValue - minimumValue). Default value is 0."
                        initialState={0}
                        tags={['C_API']}
                        arrange={({ setState, state }) => {
                            return (
                                <View >
                                    <Text>{"current step  ： "}{JSON.stringify(10)}</Text>
                                    <Text>{"current value  ： "}{JSON.stringify(state)}</Text>
                                    <Slider
                                        style={{ width: 200, height: 40 }}
                                        minimumValue={0}
                                        maximumValue={100}
                                        step={10}
                                        onValueChange={(v) => {
                                            setState(Math.trunc(v))
                                        }}
                                        minimumTrackTintColor={"#FFFFFF"}
                                        maximumTrackTintColor={"#000000"}
                                    />
                                </View>
                            )
                        }}
                        assert={async ({ expect, state }) => {
                            expect(state).to.be.eq(100);
                        }}
                    />
                    <TestCase
                        itShould="value: Write-only property representing the value of the slider. Can be used to programmatically control the position of the thumb. The value should be between minimumValue and maximumValue, which default to 0 and 1 respectively. Default value is 0."
                        initialState={1}
                        tags={['C_API']}
                        arrange={({ setState, state }) => {
                            return (
                                <View >
                                    <Text>{"init value  ： "}{JSON.stringify(state)}</Text>
                                    <Slider
                                        style={{ width: 200, height: 40 }}
                                        minimumValue={0}
                                        value={state}
                                        maximumValue={100}
                                        step={10}
                                        minimumTrackTintColor={"#FFFFFF"}
                                        maximumTrackTintColor={"#000000"}
                                    />
                                    <Button onPress={() => {
                                        setState(30)
                                    }} title="change Value" />
                                </View>
                            )
                        }}
                        assert={async ({ expect, state }) => {
                            expect(state).to.be.eq(30);
                        }}
                    />
                    <TestCase
                        itShould="inverted: Reverses the direction of the slider.Default value is false."
                        initialState={false}
                        tags={['C_API']}
                        arrange={({ setState, state }) => {
                            return (
                                <View >
                                    <Text>{"current inverted value： "}{JSON.stringify(state)}</Text>
                                    <Slider
                                        style={{ width: 200, height: 40 }}
                                        minimumValue={0}
                                        inverted={state}
                                        maximumValue={100}
                                        minimumTrackTintColor={"#FFFFFF"}
                                        maximumTrackTintColor={"#000000"}
                                    />
                                    <Button onPress={() => {
                                        setState(true)
                                    }} title="change inverted Value" />
                                </View>
                            )
                        }}
                        assert={async ({ expect, state }) => {
                            expect(state).to.be.eq(true);
                        }}
                    />
                    <TestCase
                        itShould="thumbTintColor: Color of the foreground switch grip."
                        initialState={"#000000"}
                        tags={['C_API']}
                        arrange={({ setState, state }) => {
                            return (
                                <View >
                                    <Slider
                                        style={{ width: 200, height: 40 }}
                                        minimumValue={0}
                                        maximumValue={100}
                                        minimumTrackTintColor={"#FFFFFF"}
                                        maximumTrackTintColor={"#000000"}
                                        thumbTintColor={state}
                                    />
                                    <Button onPress={() => {
                                        setState('red')
                                    }} title="change to thumbTintColor" />

                                </View>
                            )
                        }}
                        assert={async ({ expect, state }) => {
                            expect(state).to.be.eq('red');
                        }}
                    />
                    <TestCase
                        itShould="thumbImage: Sets an image for the thumb. Only static images are supported. "
                        initialState={0.5}
                        tags={['C_API']}
                        arrange={({ setState, state }) => {
                            return (
                                <View >
                                    <Slider
                                        thumbImage={require('../../assets/expo.png')}
                                        style={{ width: 200, height: 40 }}
                                        minimumValue={0}
                                        maximumValue={100}
                                        minimumTrackTintColor="#FFFFFF"
                                        maximumTrackTintColor="#000000"
                                    />
                                </View>
                            )
                        }}
                        assert={async ({ expect, state }) => {
                        }}
                    />
                    <TestCase
                        itShould="renderStepNumber: Turns on the displaying of numbers of steps, current vertical value： true."
                        initialState={false}
                        tags={['C_API']}
                        arrange={({ setState, state }) => {
                            return (
                                <View >
                                    <Text>{"current vertical value： true"}</Text>
                                    <RenderStepNumberExample></RenderStepNumberExample>
                                </View>

                            )
                        }}
                        assert={async ({ expect, state }) => {
                            expect(state).to.be.eq(true);
                        }}
                    />
                    <TestCase
                        itShould="renderStepNumber: Turns on the displaying of numbers of steps,current vertical value： false."
                        initialState={false}
                        tags={['C_API']}
                        arrange={({ setState, state }) => {
                            return (
                                <View >
                                    <Text>{"current vertical value： false"}</Text>
                                    <RenderStepNumberFalseExample></RenderStepNumberFalseExample>
                                </View>

                            )
                        }}
                        assert={async ({ expect, state }) => {
                            expect(state).to.be.eq(true);
                        }}
                    />
                    <TestCase
                        itShould="StepMarker: Your custom component rendered for every step on the Slider, both the thumb and the rest of steps along the Slider's whole length."
                        initialState={false}
                        tags={['C_API']}
                        arrange={({ setState, state }) => {
                            return (
                                <View >
                                    <Text>{"stepMarked"}</Text>
                                    <StepMarkerSliderExample></StepMarkerSliderExample>
                                </View>
                            )
                        }}
                        assert={async ({ expect, state }) => {
                            expect(state).to.be.eq(true);
                        }}
                    />
                    <TestCase
                        itShould="StepMarker: test stepMarked."
                        initialState={false}
                        tags={['C_API']}
                        arrange={({ setState, state }) => {
                            return (
                                <View >
                                    <Text>{"stepMarked"}</Text>
                                    <StepMarkerSliderExample></StepMarkerSliderExample>
                                </View>
                            )
                        }}
                        assert={async ({ expect, state }) => {
                            expect(state).to.be.eq(true);
                        }}
                    />
                    <TestCase
                        itShould="StepMarker: test currentValue."
                        initialState={false}
                        tags={['C_API']}
                        arrange={({ setState, state }) => {
                            return (
                                <View >
                                    <Text>{"currentValue"}</Text>
                                    <StepMarkerCurrentValueExample></StepMarkerCurrentValueExample>
                                </View>
                            )
                        }}
                        assert={async ({ expect, state }) => {
                            expect(state).to.be.eq(true);
                        }}
                    />
                    <TestCase
                        itShould="StepMarker: test index."
                        initialState={false}
                        tags={['C_API']}
                        arrange={({ setState, state }) => {
                            return (
                                <View >
                                    <Text>{"index"}</Text>
                                    <StepMarkerIndexExample></StepMarkerIndexExample>
                                </View>
                            )
                        }}
                        assert={async ({ expect, state }) => {
                            expect(state).to.be.eq(true);
                        }}
                    />
                    <TestCase
                        itShould="StepMarker: test max."
                        initialState={false}
                        tags={['C_API']}
                        arrange={({ setState, state }) => {
                            return (
                                <View >
                                    <Text>{"max"}</Text>
                                    <StepMarkerMaxExample></StepMarkerMaxExample>
                                </View>
                            )
                        }}
                        assert={async ({ expect, state }) => {
                            expect(state).to.be.eq(true);
                        }}
                    />
                    <TestCase
                        itShould="StepMarker: test min."
                        initialState={false}
                        tags={['C_API']}
                        arrange={({ setState, state }) => {
                            return (
                                <View >
                                    <Text>{"min"}</Text>
                                    <StepMarkerMinExample></StepMarkerMinExample>
                                </View>
                            )
                        }}
                        assert={async ({ expect, state }) => {
                            expect(state).to.be.eq(true);
                        }}
                    />
                </TestSuite>
            </Tester>
        </ScrollView>
    );
};

const RenderStepNumberExample = (props: SliderProps) => {
    return (
        <View>
            <NewSliderExample
                {...props}
                minimumValue={0}
                maximumValue={15}
                step={1}
                tapToSeek
                renderStepNumber
                minimumTrackTintColor={'red'}
                maximumTrackTintColor={'#000000ff'}
            />
        </View>
    );
};

const RenderStepNumberFalseExample = (props: SliderProps) => {
    return (
        <View>
            <NewSliderExample
                {...props}
                minimumValue={0}
                maximumValue={15}
                step={1}
                tapToSeek
                renderStepNumber={false}
                minimumTrackTintColor={'red'}
                maximumTrackTintColor={'#000000ff'}
            />
        </View>
    );
};


const StepMarkerSliderExample = (props: SliderProps) => {
    const renderStepMarker = useCallback(({ stepMarked }: MarkerProps) => {
        return stepMarked ? (
            <View style={{ width: 20, height: 2, backgroundColor: 'yellow' }} />
        ) : (
            <View style={{ width: 20, height: 2, backgroundColor: 'pink' }} />
        );
    }, []);

    return (
        <View>
            <NewSliderExample
                {...props}
                minimumValue={0}
                maximumValue={15}
                step={1}
                tapToSeek
                StepMarker={renderStepMarker}
                minimumTrackTintColor={'red'}
                maximumTrackTintColor={'#000000ff'}
            />
        </View>
    );
};

const StepMarkerIndexExample = (props: SliderProps) => {
    const renderStepMarker = useCallback(({ stepMarked, index }: MarkerProps) => {
        return stepMarked ? (
            <View style={{}}>
                <View style={{ width: 20, height: 2, backgroundColor: 'yellow' }} />
                <View style={[styles.customComponentLeftFrame, styles.filled]}>
                    <Text style={styles.trackText}>{index}</Text>
                </View>
            </View>
        ) : (
            <View style={{ width: 20, height: 2, backgroundColor: 'pink' }} />
        );
    }, []);

    return (
        <View>
            <NewSliderExample
                {...props}
                minimumValue={0}
                maximumValue={15}
                step={1}
                tapToSeek
                StepMarker={renderStepMarker}
                minimumTrackTintColor={'red'}
                maximumTrackTintColor={'#000000ff'}
            />
        </View>
    );
};


const StepMarkerMaxExample = (props: SliderProps) => {
    const renderStepMarker = useCallback(({ stepMarked, max }: MarkerProps) => {
        return stepMarked ? (
            <View style={{}}>
                <View style={{ width: 20, height: 2, backgroundColor: 'yellow' }} />
                <View style={[styles.customComponentRightFrame, styles.empty]}>
                    <Text style={styles.trackText}>{max}</Text>
                </View>
            </View>
        ) : (
            <View style={{ width: 20, height: 2, backgroundColor: 'pink' }} />
        );
    }, []);

    return (
        <View>
            <NewSliderExample
                {...props}
                minimumValue={0}
                maximumValue={15}
                step={1}
                tapToSeek
                StepMarker={renderStepMarker}
                minimumTrackTintColor={'red'}
                maximumTrackTintColor={'#000000ff'}
            />
        </View>
    );
};

const StepMarkerMinExample = (props: SliderProps) => {
    const renderStepMarker = useCallback(({ stepMarked, min }: MarkerProps) => {
        return stepMarked ? (
            <View style={{}}>
                <View style={{ width: 20, height: 2, backgroundColor: 'yellow' }} />
                <View style={[styles.customComponentRightFrame, styles.empty]}>
                    <Text style={styles.trackText}>{min}</Text>
                </View>
            </View>
        ) : (
            <View style={{ width: 20, height: 2, backgroundColor: 'pink' }} />
        );
    }, []);

    return (
        <View>
            <NewSliderExample
                {...props}
                minimumValue={0}
                maximumValue={15}
                step={1}
                tapToSeek
                StepMarker={renderStepMarker}
                minimumTrackTintColor={'red'}
                maximumTrackTintColor={'#000000ff'}
            />
        </View>
    );
};


const StepMarkerCurrentValueExample = (props: SliderProps) => {
    const renderStepMarker = useCallback(({ stepMarked, currentValue, index }: MarkerProps) => {
        if (stepMarked) {
            return (
                <View style={styles.customComponentFrame}>
                    <Text style={[styles.trackText, { position: 'absolute', left: 18 }]}>
                        /
                    </Text>
                </View>
            );
        }
        return currentValue > index ? (
            <View style={[styles.trackDot, styles.filled]} />
        ) : (
            <View style={[styles.trackDot, styles.empty]} />
        );
    }, []);

    return (
        <View>
            <NewSliderExample
                {...props}
                minimumValue={0}
                maximumValue={15}
                step={1}
                tapToSeek
                StepMarker={renderStepMarker}
                minimumTrackTintColor={'red'}
                maximumTrackTintColor={'#000000ff'}
            />
        </View>
    );
}


const NewSliderExample = (props: SliderProps) => {
    const [value, setValue] = useState(props.value ?? 0);
    return (
        <View style={{ alignItems: 'center' }}>
            <Slider
                step={0.5}
                style={{ width: 300, height: 40 }}
                {...props}
                value={value}
                onValueChange={setValue}
            />
        </View>
    );
};



export const displayName = 'react-native-community/slider';
export const framework = 'React';
export const category = 'UI';
export const title = 'react-native-community/slider';
export const documentationURL = 'https://gitee.com/react-native-oh-library/usage-docs/blob/master/zh-cn/react-native-community-progress-bar-android.md#https://gitee.com/link?target=https%3A%2F%2Fgithub.com%2Freact-native-oh-library%2Fprogress-bar-android';
export const description = 'react-native-community/slider';

export const examples = [
    {
        title: 'react-native-community-slider',
        render: function (): any {
            return <SliderExample />;
        },
    },
];

const styles = StyleSheet.create({
    text: {
        fontSize: 14,
        textAlign: 'center',
        fontWeight: '500',
        margin: 0,
    },
    trackText: {
        color: '#FFFFFF',
        fontSize: 10,
        justifyContent: 'center',
        alignSelf: 'center',
        top: 12,
    },
    trackDot: {
        width: 10,
        height: 10,
        borderRadius: 10,
        top: 4,
    },
    empty: {
        backgroundColor: '#B3BFC9',
    },
    filled: {
        backgroundColor: '#00629A',
    },
    customComponentFrame: {
        flex: 1,
        flexDirection: 'row',
        top: -10,
        opacity: 0.95,
    },
    customComponentLeftFrame: {
        height: 40,
        width: 20,
        borderTopLeftRadius: 40,
        borderBottomLeftRadius: 40,
    },
    customComponentRightFrame: {
        height: 40,
        width: 20,
        borderTopRightRadius: 40,
        borderBottomRightRadius: 40,
    },
    divider: {
        width: 2,
        height: 20,
        backgroundColor: '#ffffff',
        justifyContent: 'center',
        alignItems: 'center',
    },
    separator: {
        width: 2,
        height: 20,
        backgroundColor: '#00629A',
        justifyContent: 'center',
        alignItems: 'center',
    },
    label: {
        marginTop: 10,
        width: 55,
        paddingVertical: 5,
        paddingHorizontal: 10,
        backgroundColor: '#ffffff',
        shadowColor: '#000000',
        shadowOffset: {
            width: 0,
            height: 1,
        },
        shadowOpacity: 0.4,
        shadowRadius: 4,
        justifyContent: 'center',
        alignItems: 'center',
    },
    background: {
        justifyContent: 'center',
        alignItems: 'center',
    },
    tinyLogo: {
        marginVertical: 2,
        aspectRatio: 1,
        flex: 1,
        height: '100%',
        width: '100%',
    },
    minMaxLabel: {
        flexDirection: 'row',
        zIndex: -1,
    },
    slider: {
        width: 300,
        opacity: 1,
        marginTop: 10,
    },
    outer: {
        width: 20,
        height: 20,
        borderRadius: 10,
        backgroundColor: '#11FF11',
        justifyContent: 'center',
        alignItems: 'center',
    },
    outerTrue: {
        width: 20,
        height: 20,
        borderRadius: 10,
        backgroundColor: '#0F0FFF',
        justifyContent: 'center',
        alignItems: 'center',
    },
    inner: {
        width: 10,
        height: 10,
        borderRadius: 5,
        backgroundColor: '#111111',
    },
    innerTrue: {
        width: 10,
        height: 10,
        borderRadius: 5,
        backgroundColor: '#0F0FFF',
    },
    container: {
        alignItems: 'center',
    },
    outerSmall: {
        width: 4,
        height: 4,
        top: 6,
        borderRadius: 2,
        backgroundColor: '#003366',
        justifyContent: 'center',
        alignItems: 'center',
    },
    outerTrueSmall: {
        width: 8,
        height: 8,
        borderRadius: 2,
        backgroundColor: '#ABCDEF',
        justifyContent: 'center',
        alignItems: 'center',
    },
    innerSmall: {
        width: 7,
        height: 7,
        borderRadius: 1,
        backgroundColor: '#223366',
    },
    innerTrueSmall: {
        width: 7,
        height: 7,
        borderRadius: 1,
        backgroundColor: '#334488',
    },
});